<template>
  <a-modal
    title="工资组成"
    centered
    :visible="true"
    width="750px"
    @cancel="dialogClosed"
  >

    <a-form
      id="form"
      :form="form"
    >
      <div v-for="(item,index) in formArr" :key="index">

        <a-form-item :extra="item.remark" :label="item.group" class="label-width-auto" v-bind="formItemLayout">
          <a-checkbox-group
            v-for="(detail) in item.details"
            :key="detail.fields"
            v-decorator="[`selected[${index}]`, { initialValue: initialCheckBox(item.details) }]"
            style="width: 100%;"
          >
            <a-checkbox :value="detail.field">
              {{ detail.name }}
            </a-checkbox>
          </a-checkbox-group>
        </a-form-item>
      </div>
    </a-form>
    <span slot="footer" class="dialog-footer">
      <a-button @click="dialogClosed()">取消</a-button>
      <a-button id="submit" :loading="submitButton.status" type="primary" @click="dataFormSubmit()">{{ submitButton.text }}</a-button>
    </span>
  </a-modal>
</template>
<style lang="less" scoped>
  #form {
    /deep/ .ant-checkbox-group {
       width:30%!important;
     }
  }

</style>
<script>
import { get, edit } from '@/pages/salary/api/salaryDepartmentRelation'
export default {
  name: 'SalaryDepartmentRelationSave',
  inject: ['formItemLayout'],
  props: {
    data: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      form: this.$form.createForm(this),
      dataForm: {
        id: null
      },
      // {group String, details []}
      formArr: [],
      submitButton: {
        text: '提交',
        status: false
      }
    }
  },
  mounted () {
    // 获取编辑数据
    this.$ajaxSend(get, this.data.id, {
      success: (datas) => {
        datas.forEach(data => {
          const exist = this.formArr.some((item) => {
            if (item.group === data.groupName) {
              item.details.push(data)
            }
            return item.group === data.groupName
          })
          if (!exist) {
            this.formArr.push({ group: data.groupName, remark: data.details, details: Array.of(data) })
          }
        })
      }
    })
  },
  methods: {
    initialCheckBox (details) {
      return details.filter(detail => detail.isActive)
        .map(detail => detail.field)
    },
    dialogClosed () {
      this.$emit('dialogClosed')
    },
    // 表单提交
    dataFormSubmit () {
      this.$saveQuit('form', edit(this.data.id), (values) => {
        const arr = []
        values.selected.forEach(value => arr.push.apply(arr, value))
        return arr
      })
    },
    handleChange (value) {
    }

  }
}
</script>
